<template>
	<div class="register">
		<div class="login-logo">
            <img class="login-logoImg mt30 mb20" src="../../assets/logo.png">
        </div>
        <div class="register-input pl30rem pr30rem">
			<div class="input_com border-b flex flex-start">
				<span class="fs28rem c333 bold">账号</span>:
				<input type="text" placeholder="请输入手机号/账号" v-model="form.mobile" class="ml20 fs28rem c999">
			</div>
			<div class="input_com border-b flex flex-start layout">
				<div class="flex_1 flex">
					<span class="fs28rem c333 bold">验证码</span>:
					<input class="ml20 coptcha-input fs28rem c999" placeholder="请输入验证码" v-model="form.captcha" maxlength="6" type="number">
				</div>
				<button class="coptcha red pl20rem pr20rem pt10rem pb10rem fs26rem" :disabled="isDisabled" @click="sendCaptcha">
					<template v-if="sending">重新发送({{ minute }}s)</template>
					<template v-else >获取验证码</template>
				</button>
			</div>
			<div class="input_com border-b flex flex-start">
				<span class="fs28rem c333 bold">密码</span>:
				<input placeholder="请输入密码" v-model="form.user_pwd"  type="password"  class="ml20 fs28rem c999">
			</div>
			<div class="input_com border-b flex flex-start">
				<span class="fs28rem c333 bold">确认密码</span>:
				<input placeholder="请输入密码" v-model="form.confirm_pwd"  type="password"  class="ml20 fs28rem c999">
			</div>
			<div class="agreement layout mt35rem mb80rem">
				<div class="pretty p-icon p-round p-jelly mr20rem fs18">
                    <input type="checkbox" v-model="agree">
                    <div class="state p-primary">
                        <i class="icon iconfont icon-gouxuan1 mdi mdi-check bg-red"></i>
                        <label></label>
                    </div>
                </div>
                <p class="fs26rem c666 flex_1">我已阅读并同意<router-link to="/h5/rule/8" class="fs26rem red" style="text-decoration:underline">前牛用户协议</router-link></p>
			</div>
			<button class="btn-button pt10 pb10" :class="{ on : boolean }" @click="submit">确定</button>

			<p class="position fs26rem c666 align-center">我已经有账号了,<router-link class="fs26rem c333" to="/login" style="text-decoration:underline">立即登录</router-link></p>
        </div>
	</div>
</template>

<script>
	import { signin, getCaptcha, saveRegister } from "@/api/login";
	import $toast from '@/utils/toast';
	export default{
		data()
		{
			return{
				isDisabled  : false,
				sending     : false,
				agree       : false,
				minute      : 60,
				verify      : false,
				clearResult : '',
				form        : {
                	mobile   : '',
					captcha  : '',
					user_pwd : '',
					confirm_pwd : ''
                }
			}
		},
		computed:
		{
			boolean()
			{
				var boolean = false;
				this.verify = false;

 				if(!this.form.mobile || !this.form.user_pwd || !this.form.confirm_pwd || !this.form.captcha)
				{
					this.verify = false;
					boolean = false;
				}
				else
				{
					this.verify = true;
					boolean = true;
				}

				return boolean;
			}
		},
		methods:
		{
			submit()
			{
				if(!this.verify)
    				return;

				if (!this.agree)
        			return $toast('同意相关协议后方可注册');

				saveRegister(this.form).then( res => {
					this.$store.dispatch("login", res.data[0]);
    				this.$router.replace(this.$route.query.redirect ? this.$route.query.redirect: '/'); 
				})
			},
			sendCaptcha()
			{
				if(this.sending)
					return;

				getCaptcha(this.form.mobile).then( res => {
					this.countDown();
				})
			},
			countDown() { 
				this.sending = true;

				var itv = setInterval(()=>{
					if(this.minute > 0){
						--this.minute
					}
					else{
						clearInterval(itv);
						this.sending = false;
						this.minute = 60;
					}
				},1000)
			}			
		}
	}
</script>

<style lang="less">
	.register{
		.register-input{
			.input_com {
				height: 120/28rem;
				line-height: 120/28rem;
				::-webkit-input-placeholder {
					color:#999;
				}
				span{
					width: 4rem;
					display: block;
					-moz-text-align-last:justify;
					text-align-last:justify;
				}
				span:after {
					content:'';
				    width: 100%;
				    overflow: hidden;
				    height: 0;
				}
				.coptcha{
					border: 2/28rem solid #ff0036;
					border-radius: 10/28rem;
				}
				.coptcha:disabled{
					background-color: #ff7f9a;
					color: rgba(255, 255, 255, 0.5);
					border-color: rgba(255, 255, 255, 0.5);
				}
				.coptcha-input{
					width: 200/28rem;
				}
			}
			.btn-button{
				display: block;
				width: 90%;
				margin: 0 auto;
				margin-top: 80/28rem;
				background-color: #ff7f9a;	
				color: rgba(255,255,255,.5);
				border-radius: 8px;
				font-size: 1rem;
			}
			.on{
				background-color:#ff0036;
				color: white;
			}
			.position{
				margin-top: 25%;
			}
		}
		.login-logoImg {
			height: 200/28rem;
			width: 200/28rem;
			display: block;
			margin-right: auto;
			margin-left: auto;
		}
	}
</style>